body {
    background: url('../image/login/loginbg.png') no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}


input[type="text"]:focus,
input[type="password"]:focus {
    box-shadow: none;
    outline: none;
    border-color: rgb(24, 159, 146);
    transition: all .3s linear;
}

/* 消息提醒 */
@keyframes messageprompt {
    0% {
        transform: translate(-50%, -100%);
        opacity: 0;
        filter: alpha(opacity=0);
    }

    20% {
        transform: translate(-50%, 20px);
        opacity: 1;
        filter: alpha(opacity=100);
    }

    80% {
        transform: translate(-50%, 20px);
        opacity: 1;
        filter: alpha(opacity=100);
    }

    100% {
        transform: translate(-50%, -100%);
        opacity: 0;
        filter: alpha(opacity=0);
    }
}

#message-wrap {
    width: 0;
    height: 0;
}

#message-wrap > * {
    min-width: 380px;
    position: fixed;
    padding: 15px 15px 15px 20px;
    font-size: 15px;
    color: #fff;
    left: 50%;
    top: 0;
    z-index: 3;
    border: 1px solid transparent;
    border-radius: 2px;
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translate(-50%, 20px);
}

#message-wrap > *.info {
    background-color: #edf2fc;
    border-color: #ebeef5;
    color: #909399;
    animation: messageprompt 3s 1 ease forwards;
}

#message-wrap > *.success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
    animation: messageprompt 3s 1 ease forwards;
}

#message-wrap > *.warning {
    background-color: #fdf6ec;
    border-color: #faecd8;
    color: #e6a23c;
    animation: messageprompt 3s 1 ease forwards;
}

#message-wrap > *.error {
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: #f56c6c;
    animation: messageprompt 3s 1 ease forwards;
}

#message-wrap > * > * {
    display: inline-block;
}

#message-wrap > * .message-text {
    margin-left: 10px;
}

#message-wrap > * i:last-child {
    color: #c0c4cc;
    float: right;
    cursor: pointer;
}

#message-wrap > * i:last-child:hover {
    color: #5fb878;
}

/* 复选框 */
.checkbox {
    position: relative;
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.checkbox .checkbox-input,
.checkbox .checkbox-label {
    width: 18px;
    height: 18px;
    display: inline-block;
    cursor: pointer;
}

.checkbox .checkbox-input {
    position: absolute;
    opacity: 0;
}

.checkbox .checkbox-label {
    border: 1px solid #d2d2d2;
    background-color: #fff;
    color: #fff;
    transition: all .3s;
    user-select: none;
    line-height: 18px;
    font-size: 12px;
    text-align: center;
    border-radius: 2px;
}

.checkbox label:not(.checkbox-label) {
    cursor: pointer;
    padding: 0 5px;
}

.checkbox .checkbox-input:hover + .checkbox-label {
    border-color: rgb(24, 159, 146);
    transition: all .2s;
}

.checkbox .checkbox-input:checked + .checkbox-label {
    background-color: rgb(24, 159, 146);
    border-color: rgb(24, 159, 146);
    transition: all .3s;
}

/* 表单 */
@keyframes login-up {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
    }

    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

#login {
    width: 420px;
    background-color: #fff;
    border-radius: 4px;
    padding: 40px;
    box-sizing: border-box;
    animation: login-up 1s 1 linear forwards;
}

#login .login-title-wrap {
    background-color: rgb(24, 159, 146);
    padding: 18px 10px 18px 60px;
    margin: 10px 0px 0px -58px;
    color: #fff;
}

#login .login-3d {
    width: 18px;
    height: 10px;
    background: url('../image/login/login3d.png') no-repeat;
    margin: 0px 0px 20px -58px;
}

#login .login-form .login-form-item {
    position: relative;
}

#login .login-form .login-form-item .login-form-item-input,
#login .login-form .login-form-item .login-form-item-submit {
    width: 100%;
    height: 50px;
    padding: 0 24px 0 16px;
    box-sizing: border-box;
    border: 1px solid rgb(220, 222, 224);
    border-radius: 3px;
    transition: all .3s linear;
}

#login .login-form .login-form-item + .login-form-item {
    margin-top: 17px;
}

#login .login-form .login-form-item .login-form-prompt {
    position: absolute;
    left: 0;
    transform: translateY(-100%);
    opacity: 0;
    filter: alpha(opacity=0);
    white-space: nowrap;
    color: #f56c6c;
    transition: all .3s;
}

#login .login-form .login-form-item .login-form-prompt.down {
    transform: translateY(0);
    opacity: 1;
    filter: alpha(opacity=100);
}

#login .login-form .login-form-item.password .login-form-item-input {
    padding-right: 40px;
}

#login .login-form .login-form-item.verify .login-form-prompt {
    margin-top: 50px;
}

#login .login-form .login-form-item.verify {
    display: flex;
    justify-content: space-between;
}

#login .login-form .login-form-item.verify .login-form-item-input {
    width: 50%;
}

#login .login-form .login-form-item .login-form-item-input.error {
    border-color: #f56c6c;
}

#login .login-form .login-form-item .login-form-item-input.success {
    border-color: #67c23a;
}

#login .login-form .login-form-item .login-form-item-input.error + .login-form-icons .fa-times-circle,
#login .login-form .login-form-item .login-form-item-input.success + .login-form-icons .fa-check-circle {
    display: initial;
}

#login .login-form .login-form-item .login-form-icons {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}

#login .login-form .login-form-item.verify .login-form-icons {
    right: calc(50% + 5px);
}

#login .login-form .login-form-item .login-form-icons > *:not(.fa-eye):not(.fa-eye-slash) {
    display: none;
}

#login .login-form .login-form-item .login-form-icons .fa-eye,
#login .login-form .login-form-item .login-form-icons .fa-eye-slash {
    width: 15px;
    color: #999;
    cursor: pointer;
}

#login .login-form .login-form-item .login-form-icons .fa-times-circle {
    color: #f56c6c;
}

#login .login-form .login-form-item .login-form-icons .fa-check-circle {
    color: #67c23a;
}

#login .login-form .login-form-item .login-form-item-img {
    width: 45%;
    cursor: pointer;
}

#login .login-form .login-form-item .login-form-item-submit {
    background-color: rgb(24, 159, 146);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

#login .login-form .login-form-item .login-form-item-submit.loading {
    opacity: .8;
    cursor: no-drop;
}

#login .login-form .login-form-item .login-form-item-submit.loading .fa-spinner {
    margin-left: 5px;
}